<template>
	<view class="bookClude">
		<view class="u-p-24">
			<up-search placeholder="搜索书籍、作者" v-model="keyword" shape="round" :showAction="false" bgColor="#F5F6F7"></up-search>
			<view class="typeClude u-m-t-24">
				<view v-for="(item, index) in typeArr" :key="index" class="typeBox"
				:class="activeClass == index ? 'activeBox' : ''"
				@click="changeType(index)"
				>
					{{item.name}}
				</view>
			</view>
			<view class="flex justify-between align-center u-m-t-54">
				<view class="recommendName">
					精选推荐
				</view>
				<view class="flex justify-center align-center">
					<text class="moreText">更多</text>
					<up-icon name="arrow-right" color="#999999" size="14"></up-icon>
				</view>
			</view>
			<view class="flex justify-start align-center">
				<view class="recommendBox" v-for="(item, index) in recommedList" :key="index"
				@click="tipDetail(item)"
				>
					<image :src="item.img" class="recommendImg" mode="aspectFill"></image>
					<view class="bookName">{{item.name}}</view>
					<view class="authorName">{{item.author}}</view>
				</view>
			</view>
		</view>
		<view class="shudan">
			<view class="jiange">
				
			</view>
			<view class="u-p-l-24 u-p-r-24">
				<view class="flex justify-between align-center u-m-t-34">
					<view class="recommendName">
						新书上架
					</view>
					<view class="flex justify-center align-center">
						<text class="moreText">更多</text>
						<up-icon name="arrow-right" color="#999999" size="14"></up-icon>
					</view>
				</view>
				<view v-for="(item,index) in shudanList" :key="index" 
				class="newBook flex justify-start align-center">
					<image :src="item.img" class="newBookImg" mode="aspectFill"></image>
					<view class="newRight">
						<view class="name">{{item.name}}</view>
						<view class="author">{{item.author}}</view>
						<view class="desc">{{item.desc}}</view>
					</view>
				</view>
			</view>
			<image src=""></image>
		</view>
	</view>
</template>

<script setup>
	import {ref, reactive} from 'vue'
	const keyword = ref('')
	const typeArr = reactive([
		{
			name: '全部'
		},
		{
			name: '文学'
		},
		{
			name: '历史'
		},
		{
			name: '科技'
		},
		{
			name: '艺术'
		}
	])
	const activeClass = ref(0)
	const changeType = (index) => {
		activeClass.value = index
	}
	const recommedList = reactive([
		{
			img: '/static/img/renshengyouwo.jpg',
			name: '人生由我',
			author: '李嘉诚'
		},
		{
			img: '/static/img/yishuzhiguang.jpg',
			name: '艺术之光',
			author: '王维'
		},
		{
			img: '/static/img/kejiweilai.jpg',
			name: '科技未来',
			author: '张三'
		}
	])
	
	const shudanList = reactive([
		{
			img: '/static/img/yuzhoutansuo.jpg',
			name: '宇宙探索',
			author:'史蒂芬·霍金',
			desc: '探索浩瀚宇宙的奥秘，揭示时空的本质。'
		},
		{
			img: '/static/img/jingjixueyueanli.jpg',
			name: '经济学原理',
			author:'萨缪尔森',
			desc: '深入浅出地讲解经济学基本原理。'
		},
		{
			img: '/static/img/zhixuezhilu.jpg',
			name: '哲学之路',
			author:'苏格拉底',
			desc: '探讨人生真谛，寻找智慧之光。'
		}
	])
	
	const tipDetail = (info) => {
		uni.navigateTo({
			url: '/pages/book/detail?info='+JSON.stringify(info)
		})
	}
</script>

<style lang="scss">
	.bookClude{
		width: 100vw;
		min-height: 100vh;
		background-color: #fff;
		.typeClude{
			overflow-x: scroll;
			white-space: nowrap;
			.typeBox{
				display: inline-block;
				width: 120rpx;
				height: 64rpx;
				background: #F5F6F7;
				border-radius: 32rpx;
				text-align: center;
				line-height: 64rpx;
				color: #666;
				margin-right: 24rpx;
			}
			.activeBox{
				background: #3498DB;
				color: #fff;
			}
		}
		.recommendName{
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
			
		}
		.moreText{
			color: #666;
			font-size: 24rpx;
		}
		.recommendBox{
			margin-top: 28rpx;
			margin-right: 24rpx;
			.recommendImg{
				width: 200rpx;
				height: 280rpx;
			}
			.bookName{
				color: #333333;
				font-size: 26rpx;
				margin-top: 28rpx;
			}
			.authorName{
				color: #999999;
				font-size: 24rpx;
				margin-top: 12rpx;
			}
		}
		.shudan{
			width: 100vw;
			.jiange{
				width: 100%;
				height: 20rpx;
				background-color: #F8F9FA;
			}
		}
		.newBook{
			margin-top: 32rpx;
			.newBookImg{
				width: 160rpx;
				height: 220rpx;
				margin-right: 24rpx;
			}
			.newRight{
				height: 220rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				.name{
					color: #333333;
					font-size: 28rpx;
					font-weight: bold;
				}
				.author{
					color: #666666;
					font-size: 24rpx;
				}
				.desc{
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}
</style>